<script setup>
import {CloseBold, User, Lock} from '@element-plus/icons-vue'
import router from "@/router";
import { ref } from 'vue'
import {ElMessage} from "element-plus";
import {post} from "@/net";

const form = ref({
    username: '',
    password: '',
    remember: false
})



const login = () => {
    if(!form.value.username || !form.value.password)
        ElMessage.warning('请填写用户名和密码!')
    else {
        post('/api/auth/login', {
            username: form.value.username,
            password: form.value.password,
            remember: form.value.remember
        }, (message) => {
            ElMessage.success(message + ', 即将为您跳转')
            setTimeout(() => router.push('/chat'), 1500)
        })
    }
}

</script>

<template>
    <div class="login-div">
        <div class="flex gap-1">
            <div class="flex-grow"></div>
            <button style="
                    margin: 5px 5px 0 0;
                    padding: .5rem .5rem .1rem .1rem;
                    color: #2f2e2e;
                    border-radius: 3px 30px 3px 3px;
                    border-color: white;
                    background-color: white;
                    " @click="router.push('/')">
                <el-icon style="font-size: 1.2rem"><CloseBold /></el-icon>
            </button>
        </div>
        <h1 style="margin-top: 20px;font-size: 30px">登&nbsp;录</h1>
        <div style="margin-top: 70px;
                padding: 0 30px;
                " class="flex flex-col gap-1">
            <el-input type="text" v-model="form.username" placeholder="用户名/邮箱">
                <template #prefix>
                    <el-icon><User /></el-icon>
                </template>
            </el-input>
            <el-input type="password" v-model="form.password" placeholder="密码" :show-password="true">
                <template #prefix>
                    <el-icon><Lock /></el-icon>
                </template>
            </el-input>
            <el-row>
                <el-col :span="10" :offset="1" style="text-align: left">
                    <el-checkbox v-model="form.remember" label="记住我" style="
                    --el-checkbox-text-color: #fff;
                    --el-checkbox-checked-text-color: var(--el-color-success-light-7);
                    --el-checkbox-checked-bg-color: var(--el-color-success);
                    "/>
                </el-col>
                <el-col :span="12" style="text-align:right;">
                    <el-link @click="router.push('/forget')" style="
                                --el-link-text-color: #fff;
                                --el-link-hover-text-color: var(--el-color-success-light-7);
                                ">
                        忘记密码？</el-link>
                </el-col>
            </el-row>
            <el-button type="primary" style="
            width: 80%;
            margin: 50px auto 0 auto;" @click="login()">立即登录</el-button>
            <el-row justify="end">
                <el-col :span="12" style="text-align:right;margin: auto 0" class="flex">
                    <span style="font-size: 13px;margin: auto 0">没有账号？</span>
                    <el-link @click="router.push('/register')" style="
                                --el-link-text-color: #fff;
                                --el-link-hover-text-color: var(--el-color-success-light-7);
                                margin: auto 0">
                        去注册</el-link>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style scoped>
    .login-div {
        position: absolute;
        left: 36.1vw;
        width: 400px;
        height: 500px;
        margin-top: 80px;
        margin-left: 50px;
        text-align: center;
        color: white;
        border: 3px solid white;
        border-radius: 30px;
        backdrop-filter: blur(.4rem);
        overflow: hidden;
    }

    @media screen and (max-width: 768px) {
        .login-div {
            left: 9vw;
            width: 350px;
            height: 500px;
            margin-top: 10px;
            margin-left: 0;
            border: 3px solid white;
            border-radius: 30px;
            backdrop-filter: blur(.4rem);
        }
    }
</style>